import { StyleSheet, Text, View, FlatList } from 'react-native';
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { deviceHistory } from '~/api/deviceApi';
import { ContentStatus, NavBarHeader } from '~/components';
import { deviceStore } from '~/store';
import { formatTimestamp } from '~/utils/formatDate';
import { px2dp, scale } from '~/utils/px2dp';

export default function UpdateDeviceLog() {
    const { t } = useTranslation();
    const { device } = deviceStore;
    const [listData, setListData] = useState([]);
    const getData = () => {
        deviceHistory({ deviceSn: device.connectDevice.device_sn, page: 1, pageSize: 10 }).then((res) => {
            const { list } = res;
            setListData(list);
        });
    };
    const renderItem = ({ item, index }) => {
        return (
            <View style={styles.listItem}>
                <Text style={styles.t1}>
                    V{item.old} {t('UpdateDeviceLog.t1')}
                    {item.new}
                </Text>
                <Text style={styles.t1}>
                    {t('UpdateDeviceLog.t2')}：{formatTimestamp(item.time, 1)}
                </Text>
            </View>
        );
    };
    useEffect(() => {
        getData();
    }, []);
    return (
        <View style={styles.container}>
            <NavBarHeader title={t('UpdateDeviceLog.title')} />
            <FlatList data={listData} renderItem={renderItem} ListEmptyComponent={<ContentStatus status="empty" />} />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    listItem: {
        backgroundColor: '#fff',
        borderRadius: px2dp(24),
        marginTop: px2dp(24),
        marginHorizontal: px2dp(24),
        padding: px2dp(24),
    },
    t1: {
        color: '#a4a4a4',
        marginBottom: px2dp(12),
        fontSize: scale(28),
    },
    t2: {
        color: '#000',
        fontSize: scale(28),
    },
});
